---
title: Icon Button
package: "@chakra-ui/button"
description: Icon button renders an icon within in a button
---

IconButton composes the `Button` component except that it renders only an icon.

<ComponentLinks
  github={{ package: "button" }}
  npm={{ package: "@chakra-ui/button" }}
/>

<carbon-ad></carbon-ad>

Since `IconButton` only renders an icon, you must pass the `aria-label` prop, so
screen readers can give meaning to the button.

## Import

```js
import { IconButton } from "@chakra-ui/react"
```

## Usage

```jsx
<IconButton aria-label="Search database" icon={<SearchIcon />} />
```

### Button Colors

The `IconButton` component accepts most of the props from the `Button`
component, so we can use `colorScheme` prop to change the color of the button.

```jsx
<IconButton
  colorScheme="blue"
  aria-label="Search database"
  icon={<SearchIcon />}
/>
```

### Button Sizes

Like the `Button component`, pass the `size` prop to change the size of the
button.

```jsx
<IconButton
  colorScheme="teal"
  aria-label="Call Segun"
  size="lg"
  icon={<PhoneIcon />}
/>
```

### Button Variants

Like the `Button` component, pass the `variant` prop to change the style of the
button.

```jsx
<IconButton
  variant="outline"
  colorScheme="teal"
  aria-label="Send email"
  icon={<EmailIcon />}
/>
```

### With custom icon

You can also use icons from popular libraries like
[react-icons](https://react-icons.github.io/react-icons/) and just pass it into
the button.

```jsx
<IconButton
  variant="outline"
  colorScheme="teal"
  aria-label="Call Sage"
  fontSize="20px"
  icon={<MdPhone />}
/>
```

## Props

<PropsTable of="IconButton" />
